<html>
<head>
       <meta charset="utf-8">
        <title>技术谢鑫</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
    crossorigin="anonymous">
      </head>
      <style>
    #aa{margin-left: auto;
        margin-right: auto;
        width: 30%;
        margin-top: 90px}
    #ac{border-width:2px;
        font-size:30px;}
      </style>
      <body>
      <div id=aa>
            <div class="panel panel-default">
            <div class="table-responsive">
                    <table class="table table-striped table-condensed">
                        <thead></thead>
                        <tbody>
                        <tr>
                            <td>简易计算器</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="container-fluid" onClick="calculater()">
                                <div class="row">
                                <div class="col-md-12">
                                <h1 class="page-header" style="text-align:right" id=ad>0</h1>
                                <div style="text-align:center;">
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                      <div style="color:black;">7</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                       <div style="color:black;">8</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">9</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:#FF721B;">/</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">4</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">5</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">6</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:#FF721B;">*</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">1</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">2</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">3</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:#FF721B;">-</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:#FF721B;">C</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:black;">0</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3" onClick="resultscalcaulte()">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:#FF721B;">=</div>
                                    </div>
                                    </div>
                                    </div>
                                    <div class="col-md-3">
                                    <div class="panel panel-default" id=ac>
                                    <div class="panel-body">
                                        <div style="color:#FF721B;">+</div>
                                    </div>
                                    </div>
                                    </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>&copy2019 <a>7gugu</a></td>
                        </tr>
                    </tbody>
                    </table>
            </div>
      </div>
      <script>
          var results="";
          var calresults="";
          var lastkey="";
          var re3=/(\+|-|\*|\/)/;
          function calculater(){
if (event.srcElement.innerText=="=") {
return;
}
if (event.srcElement.innerText=="C") {
results="";
ad.innerText="0";
return;
}
if(lastkey.match(re3)&&event.srcElement.innerText.match(re3)){
return;
}
if(lastkey=="="&&event.srcElement.innerText.match(re3)){
results=calresults;
}
results+=event.srcElement.innerText;
lastkey=event.srcElement.innerText;
ad.innerText=results;
}
          function resultscalcaulte(){
calresults=eval(results);
ad.innerText=calresults;
lastkey="=";
results="";
}
      </script>      
      </body>
                    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
                    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
                     integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
                     crossorigin="anonymous"></script>
</html>